<template>
  <div class="admin-root">
    <aside class="admin-sider">
      <div class="admin-logo">
        <img class="admin-logo-img" src="@/assets/logo.png" alt="logo" />
        <div class="admin-logo-texts">
          <div class="admin-logo-title">小白盒</div>
          <div class="admin-logo-en">WhiteBox</div>
        </div>
      </div>
      <nav class="admin-menu">
        <router-link to="/admin/dashboard">数据看板</router-link>
        <router-link to="/admin/users">用户管理</router-link>
        <router-link to="/admin/roles">内容审核</router-link>
        <router-link to="/admin/menus">话题管理</router-link>
      </nav>
    </aside>
    <main class="admin-main">
      <header class="admin-header">小白盒 后台中心</header>
      <section class="admin-content">
        <router-view />
      </section>
    </main>
  </div>
  </template>

<script setup>
</script>

<style>
.admin-root { display:flex; height:100vh; }
.admin-sider { width:340px; background:rgba(0,0,0,.8) url("@/assets/bg.png") no-repeat left center/cover; color:#fff; display:flex; flex-direction:column; }
.admin-logo { padding:24px; font-weight:600; display:flex; align-items:center; gap:12px; }
.admin-logo-img { width:32px; height:32px; border-radius:6px; }
.admin-logo-texts { display:flex; flex-direction:column; }
.admin-logo-title { font-size:18px; letter-spacing:2px; }
.admin-logo-en { font-size:12px; color:#bbb; letter-spacing:1px; }
.admin-menu { display:flex; flex-direction:column; gap:6px; padding:6px 16px 16px; }
.admin-menu a { color:#e5e7eb; text-decoration:none; padding:10px 12px; border-radius:8px; }
.admin-menu a:hover { background:#1f2937; color:#fff; }
.admin-menu a.router-link-active { background:#374151; color:#fff; }
.admin-main { flex:1; display:flex; flex-direction:column; }
.admin-header { height:56px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; padding:0 16px; background:#ffffff; font-weight:600; color:#111827; }
.admin-content { padding:16px; overflow:auto; background:#f3f4f6; flex:1; }
.page-head { margin:0 0 12px 0; }
.page-title { font-size:22px; font-weight:800; color:#111827; letter-spacing:.5px; }
.page-subtitle { font-size:13px; color:#6b7280; margin-top:4px; }
</style>


